<template>
  <div>
    <div class="content">
      <div class="soundmark">
        点击
        <img src="~@/assets/img/naturalSpell/play.png" alt="" />
        听读音
      </div>
      <div class="demo">
        <img class="topic" :src="wordData.pic_url" alt="" />
        <div class="soundmark_content">
          <span class="soundmark_demo">{{
            wordData.word_name + "[" + wordData.phonetic + "]"
          }}</span>
          <AudioPlay
            :size="['36px', '30px']"
            class="fr click"
            ref="audioPlay"
            :type="6"
            :audioSrc="baseURL + wordData.audioURL"
            @onIsPlay="onIsPlayWord"
          ></AudioPlay>
        </div>
        <div v-if="wordData.is_true == 0 || wordData.is_true == 1">
          <p class="word_text">
            {{ wordData.paraphrase }}
          </p>
        </div>
        <div
          v-if="wordData.is_true == 0 || wordData.is_true == 1"
          style="position: absolute;bottom: 80px;"
        >
          <el-button
            v-if="wordData.isSkipTag"
            class="button button-bg-primary"
            @click="nextIntQuestion()"
            >继续</el-button
          >
          <el-button
            class="button button-bg-primary"
            @click="nextIntQuestion(wordData.isSkipTag)"
            >{{ wordData.isSkipTag ? "跳过" : "下一题" }}</el-button
          >
        </div>
      </div>
      <div class="btn_group" style="margin-top: 80px;">
        <div
          v-if="wordData.is_true == 0 || wordData.is_true == 1"
          style="position: absolute; top: 0;right: 20px;display: flex;align-items: center; color: #6B5131;font-size: 16px;"
        >
          我的发音
          <span
            v-for="(item, index) in wordData.detail.filter(
              (item) => item.subwords.length
            )"
            :key="index"
          >
            [
            <span
              v-for="(item1, index1) in item.subwords"
              :key="index1"
              class="phonetic-text"
              :class="item1.score <= 8 ? 'red-color-text' : 'green-color-text'"
              >{{ item1.subtext }}</span
            >]
          </span>
          <AudioPlay
            :size="['24px', '21px']"
            class="ml5"
            :type="1"
            :audioSrc="wordData.fileData"
          ></AudioPlay>
        </div>
        <div class="audio-record" style="position: relative;">
          <AudioRecord
            :class="[
              wordData.is_true == 0 || wordData.is_true == 1 ? 'no_click' : '',
            ]"
            :type="2"
            @start="handleStart"
            @ended="handleEnd"
            @clickEnd="audioRecordEnd()"
            @beforeSatrt="beforeRecordSatrt"
            :ref="`audioRecord-${wordData.id}`"
            :maxTime="10000"
          ></AudioRecord>
          <span
            v-if="wordData.is_true == 0 || wordData.is_true == 1"
            class="score-number"
            >{{ wordData.score }}
            <span style="font-size: 16px;padding-bottom: 5px;">分</span></span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AudioPlay from "@/components/AudioPlay";
import AudioRecord from "@/components/AudioRecord";
import { postSpellVoice, postNewSpellVoice } from "@/api/naturalSpell";
import { throttle } from "@/utils/utils";
export default {
  name: "studyWord",
  data() {
    return {
      isCheckedFalse: false,
      dialogExampleVisible: false,
      countDown: 2,
      isPlay: false,
      hasRecording: false,
    };
  },
  methods: {
    audioRecordClick() {
      if (this.hasRecording == false) {
        this.$refs[`audioRecord-${this.wordData.id}`].clickStart();
      } else {
        this.$refs[`audioRecord-${this.wordData.id}`].clickStop();
      }
    },
    nextIntQuestion(isSkipTag) {
      this.$parent.nextIntQuestion(isSkipTag);
    },
    onIsPlayWord(isPlay) {
      this.isPlay = isPlay;
    },
    handleStart() {
      console.log(this.hasRecording, "开始11111");
      this.hasRecording = true;
    },
    handleEnd() {
      console.log("结束");
      this.hasRecording = false;
    },
    // 点击录音开始前的回调
    beforeRecordSatrt() {
      this.$pauseAllAudio();
      this.$emit("pauseRecord");
    },
    pauseRecord() {
      if (this.hasRecording) {
        this.$refs[`audioRecord-${this.wordData.id}`].clickStop();
      }
    },
    // 点击结束录音的回调
    // sentence_id=181&content=I'm Mike.
    // http://localhost:8101/sound/save?word_id=121&word_name=testcc&is_child=1&accent=1
    audioRecordEnd() {
      let blob = this.$refs[`audioRecord-${this.wordData.id}`].getMp3Data();
      let file = new window.File([blob], this.wordData.id + ".mp3", {
        type: blob.type,
      });
      let formData = new FormData();
      formData.append("sound_file", file);
      formData.append(
        "unit_id",
        Number(
          this.$route.query.unitId
            ? this.$route.query.unitId
            : this.wordData.unit_id
        )
      );
      formData.append("word_name", this.wordData.word_name);
      formData.append("word_id", Number(this.wordData.word_id));
      formData.append("accent", this.$store.getters.isBritish ? 1 : 2);
      formData.append("is_child", 1);
      formData.append("source", 2);
      this.postSpellVoice(formData, blob);
    },
    postSpellVoice(data, blob) {
      postNewSpellVoice(data)
        .then((res) => {
          if (res.code == 200) {
            this.$emit(
              "alreadyRead",
              res.data.context.score,
              blob,
              res.data.context.lines[0].words
            );
          }
        })
        .catch(() => {});
    },
  },
  components: {
    AudioRecord,
    AudioPlay,
  },
  created() {
    // this.initCompon();
  },
  mounted() {
    console.log(this.wordData, "wordData");
  },
  props: {
    wordData: {
      type: Object,
    },
  },
  watch: {
    wordData() {
      // this.initCompon();
    },
  },
};
</script>
<style lang="scss" scoped>
.score-number {
  position: absolute;
  left: 80px;
  white-space: nowrap;
  top: 15px;
  font-size: 30px;
  color: rgb(255, 150, 17);
}
// 禁用鼠标点击事件
.no_click {
  pointer-events: none;
}

.content {
  position: relative;
  margin: 19px auto 0;
  width: 954px;
  height: 487px;
  display: flex;

  .soundmark {
    width: 230px;
    padding: 53px 0 0 92px;
    font-size: 14px;
    font-weight: 400;
    color: #6b5131;

    img {
      width: 24px;
      height: 21px;
    }
  }

  .demo {
    flex: 1;
    padding-top: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .topic {
      height: 145px;
    }

    .soundmark_content {
      padding: 21px 0 14px;
      font-size: 26px;
      font-weight: 400;
      color: #6b5131;

      .soundmark_demo {
        padding-right: 10px;
      }

      img {
        cursor: pointer;
        width: 38px;
        height: 33px;
      }
    }

    .word_text {
      font-size: 18px;
      font-weight: 400;
    }
  }

  .btn_group {
    text-align: right;
    width: 230px;
    height: 163px;
    padding-top: 174px;
    padding-right: 91px;

    .btn_no {
      cursor: pointer;
      margin-top: 17px;
    }

    img {
      cursor: pointer;
      width: 139px;
      height: 73px;
    }

    .number {
      position: relative;
      left: 0;
      top: 0;

      img {
        width: 76px;
        height: 77px;
        cursor: pointer;
      }

      .text {
        position: absolute;
        right: 32px;
        top: 20px;
        color: #ffff;
        font-size: 30px;
      }
    }
  }
}

.footer {
  position: absolute;
  bottom: 70px;
  left: 55px;

  .text {
    // padding-left: 55px;
    font-size: 14px;
    font-weight: 400;
    color: #6b5131;
    line-height: 22px;
  }

  .img {
    img {
      cursor: pointer;
      width: 28px;
      height: 26px;
    }
  }
}
</style>
